<!--css-->
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/navbar.css" rel="stylesheet" />
<link href="css/search.css" rel="stylesheet" />
<link href="css/eventprofile.css" rel="stylesheet" />
<!--end css-->

<!--nabvar-->

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="profile.html">MeteoCal</a><span></span>
  </div>

  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <div class="col-sm-3 col-md-3">
        <form class="navbar-form" role="search">
        <div class="input-group">
            <input type="text" class="form-control" placeholder="Search" name="q">
            <div class="input-group-btn">
                <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
            </div>
        </div>
        </form>
    </div>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="profile.html">User Name</a></li>
      <li><a href="index.html">Logout</a></li>
    </ul>
  </div><!-- /.navbar-collapse -->
</nav>


<!--end nabvar-->

<!-- here go the rest of the search page -->
<div class="container">
    <div class="col-md-3">
	    <!-- Here goes the users found  -->
	    Users matching with "john"
	    <div class="mycontent-left">
	        <ul class="user-list">
		       	<li><a href="calendar.html">
			        	<div class="row user-row">
				            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
				                <img class="img-circle search-user-image"
				                     src="imgs/profile.png"
				                     alt="User Pic">
				            </div>
				            <div class="col-xs-8">
				                <strong class="text-field">John Smith</strong><br>
				                <span class="text-field">Calendar: Public</span>
				                <br>
				                <span ><a class="text-field" href="mailto:info@support.com">info@support.com</a></span>
				            </div>
				        </div></a>
				</li>
		       	<li><a href="calendar.html">
			        	<div class="row user-row">
				            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
				                <img class="img-circle search-user-image"
				                     src="imgs/profile.png"
				                     alt="User Pic">
				            </div>
				            <div class="col-xs-8">
				                <strong class="text-field">John Wright</strong><br>
				                <span class="text-field">Calendar: Public</span>
				                <br>
				                <span ><a class="text-field" href="mailto:info@support.com">info@support.com</a></span>
				            </div>
				        </div></a>
				</li>
		       	<li><a href="calendar.html">
			        	<div class="row user-row">
				            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
				                <img class="img-circle search-user-image"
				                     src="imgs/profile.png"
				                     alt="User Pic">
				            </div>
				            <div class="col-xs-8">
				                <strong class="text-field">John Obama</strong><br>
				                <span class="text-field">Calendar: Private</span>
				                <br>
				                <span ><a class="text-field" href="mailto:info@support.com">info@support.com</a></span>
				            </div>
				        </div></a>
				</li>
		    </ul>

	    </div>
	</div>
    <div class="col-md-9">
	    Events matching with "john":
	    <div class="mycontent-right">

	    <!-- events -->
					
		<div class="row">
			<div class="[ col-xs-12 col-sm-8 ]">
				<ul class="event-list">
					<li>
						<time datetime="2015-02-20">
							<span class="day">02</span>
							<span class="month">Feb</span>
							<span class="year">2015</span>
							<span class="time">20:50 AM</span>
						</time>
						<div class="info">
					      	<div class="row">
						      <div class="col-md-offset-1 col-md-7 row-item-left">
								<h2><a href="event.html">Independence Day</a></h2> 
						        <p>Where: NASA base, Columbia</p>
						        <p>Host: <a href="calendar.html">John Smith</a></p>
						      </div>
						      <div class="col-md-2 row-item-right">
								<img class="search-event-image" alt="Sunny Day" src="imgs/forecast/sunny.png" />
						      </div>
						      <div class="col-md-1 row-item-right">
						        <p>Outdoor</p>
						      </div>
						      <div class="col-md-1 row-item-right">
						        <p>Private</p>
						      </div>
					  		</div>
						</div>
					</li>
					<li>
						<time datetime="2015-02-20">
							<span class="day">02</span>
							<span class="month">Feb</span>
							<span class="year">2015</span>
							<span class="time">20:50 AM</span>
						</time>
						<div class="info">
					      	<div class="row">
						      <div class="col-md-offset-1 col-md-7 row-item-left">
								<h2><a href="event.html">Independence Day</a></h2> 
						        <p>Where: NASA base, Columbia</p>
						        <p>Host: <a href="calendar.html">John Smith</a></p>
						      </div>
						      <div class="col-md-2 row-item-right">
								<img class="search-event-image" alt="Sunny Day" src="imgs/forecast/sunny.png" />
						      </div>
						      <div class="col-md-1 row-item-right">
						        <p>Outdoor</p>
						      </div>
						      <div class="col-md-1 row-item-right">
						        <p>Private</p>
						      </div>
					  		</div>
						</div>
					</li>
					<li>
						<time datetime="2015-02-20">
							<span class="day">02</span>
							<span class="month">Feb</span>
							<span class="year">2015</span>
							<span class="time">20:50 AM</span>
						</time>
						<div class="info">
					      	<div class="row">
						      <div class="col-md-offset-1 col-md-7 row-item-left">
								<h2><a href="event.html">Independence Day</a></h2> 
						        <p>Where: NASA base, Columbia</p>
						        <p>Host: <a href="calendar.html">John Smith</a></p>
						      </div>
						      <div class="col-md-2 row-item-right">
								<img class="search-event-image" alt="Sunny Day" src="imgs/forecast/sunny.png" />
						      </div>
						      <div class="col-md-1 row-item-right">
						        <p>Outdoor</p>
						      </div>
						      <div class="col-md-1 row-item-right">
						        <p>Private</p>
						      </div>
					  		</div>
						</div>
					</li>
					<li>
						<time datetime="2015-02-20">
							<span class="day">02</span>
							<span class="month">Feb</span>
							<span class="year">2015</span>
							<span class="time">20:50 AM</span>
						</time>
						<div class="info">
					      	<div class="row">
						      <div class="col-md-offset-1 col-md-7 row-item-left">
								<h2><a href="event.html">Independence Day</a></h2> 
						        <p>Where: NASA base, Columbia</p>
						        <p>Host: <a href="calendar.html">John Smith</a></p>
						      </div>
						      <div class="col-md-2 row-item-right">
								<img class="search-event-image" alt="Sunny Day" src="imgs/forecast/sunny.png" />
						      </div>
						      <div class="col-md-1 row-item-right">
						        <p>Outdoor</p>
						      </div>
						      <div class="col-md-1 row-item-right">
						        <p>Private</p>
						      </div>
					  		</div>
						</div>
					</li>
				</ul>
			</div>
		</div>

	</div>
</div>

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>